<template>
    <div class="singer-cat-list">
        <div class="singer-cat-item">
            <h2 class="title">推荐</h2>
            <ul>
                <li><a href="javascript:;">推荐歌手</a></li>
                <li><a href="javascript:;">入住歌手</a></li>
            </ul>
        </div>
        <div class="singer-cat-item">
            <h2 class="title">华语</h2>
            <ul>
                <li><a href="javascript:;">华语男歌手</a></li>
                <li><a href="javascript:;">华语女歌手</a></li>
                <li><a href="javascript:;">华语组合乐队</a></li>
            </ul>
        </div>
        <div class="singer-cat-item">
            <h2 class="title">欧美</h2>
            <ul>
                <li><a href="javascript:;">欧美男歌手</a></li>
                <li><a href="javascript:;">欧美女歌手</a></li>
                <li><a href="javascript:;">欧美组合乐队</a></li>
            </ul>
        </div>
  </div>
</template>

<script>
export default {
    props: {
        data1: Array,
        data2: Array,
        data3: Array
    }
}
</script>

<style lang="less" scoped>
    .singer-cat-list {
        .singer-cat-item{
            .title{
                margin: 5px 0;
                height: 25px;
                line-height: 25px;
                padding-left: 20px;
                font-size: 16px;
                font-family: "Microsoft Yahei";
            }
            ul{
                border-bottom: 1px solid rgb(186, 186, 186);
                li{
                    padding-left: 30px;
                    line-height: 29px;
                    cursor: pointer;
                    a {
                        color: #333;
                        &:hover {
                            color: #333 !important;
                        }
                    }
                }
            }
        }
    }
</style>